<script setup>
import { ref } from 'vue';
import elementui from './components/elementui.vue'
import vantui from './components/vant.vue'
import { changeLocale } from './i18n'

const language = [
  {
    locale: 'zh',
    des: '中文'
  },
  {
    locale: 'en',
    des: 'English'
  },
  {
    locale: 'es',
    des: 'Español'
  }
]
const currentLang = ref(language[0])
const changeLanguage = (data) => {
  currentLang.value = data

  changeLocale(data.locale)
}
</script>

<template>
  <div class="content">
    <h2>{{ $t('title') }}</h2>
    <p>{{ $t('description') }}</p>
    <el-dropdown>
      <el-button type="primary">
        {{ currentLang.des }}
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="item in language" :key="item" @click="changeLanguage(item)">{{ item.des }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <div class="main">
      <elementui :locale="currentLang.locale" />
      <vantui :locale="currentLang.locale" />
    </div>
  </div>
</template>

<style scoped>
.content{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.content .main{
  margin-top: 2rem;
  display: flex;
}
</style>
<!-- 
<i18n>
  {
    "zh": {
      "hello": '你好!'
    },
    "en": {
      "hello": "hello world!"
    }
  }
</i18n> -->
